
<!--产品-->

<template>
  <div class="pc-product">
    <div>
      <a @click="goLogin" style="display: block;">
        <img
          :src="require('../../assets/imgs/product_nav/banner-1.png')"
          @load="loadImg('pc-product-img', 1366, 344)"
          class="pc-product-img"
        >
      </a>
    </div>
    <div>
      <div class="pc-product-title">功能应用</div>
      <div class="pc-product-content">
        <div class="pc-product-content-wrap">
          <div
            :key="item.id"
            @click="productDataItemCLick"
            class="container-out"
            v-for="item in productData"
          >
            <div class="container">
              <div>
                <div class="pc-product-content-up">
                  <div class="svg">
                    <!-- <span class="bgContent svg"></span> -->
                    <img :src="item.src">
                  </div>
                  <div class="content-up-name">{{item.name}}</div>
                </div>
                <div class="pc-product-content-down">
                  <div>{{item.detail}}</div>
                  <!--                       <button @click="gotoDetail">了解详情</button>-->
                  <div>
                    <el-button @click="gotoDetail" round>了解详情</el-button>
                  </div>
                  <!--                       <el-button type="primary" round @click="gotoDetail">了解详情</el-button>-->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div>
      <div class="pc-product-title hu">互动应用</div>
      <div class="pc-product-content">
        <div class="pc-product-content-wrap">
          <div
            :key="item.id"
            @click="productDataItemCLick"
            class="container-out"
            v-for="item in dongData"
          >
            <div class="container">
              <div>
                <div class="pc-product-content-up">
                  <div>
                    <img :src="item.src">
                  </div>
                  <div class="content-up-name">{{item.name}}</div>
                </div>
                <div class="pc-product-content-down">
                  <div>{{item.detail}}</div>
                  <div>
                    <el-button @click="gotoDetail" round>了解详情</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>-->
    <login :dialogVisible="dialogVisible" :isSignIn="isSignIn" @close="closeDialog"></login>
    <div @click="close" class="login-mask" tabindex="0" v-if="showmask"></div>
  </div>
</template>

<script>
import bg_1 from '../../assets/imgs/bg_1.png';
import bg_2 from '../../assets/imgs/bg_2.png';
import bg_5 from '../../assets/imgs/bg_5.png';
import bg_3 from '../../assets/imgs/bg_3.png';
import bg_4 from '../../assets/imgs/bg_4.png';
import login from './login';
import { loadImg } from '../../utils/util';

export default {
    name: 'product',
    components: {
        login,
    },
    data() {
        return {
            showmask: false,
            dialogVisible: false,
            isSignIn: '',
            account: {
                username: '',
                password: '',
                nickName: '',
                mobile: '',
            },
            isLoging: false,
            isRemember: true,
            keys: 1,
            signUp: false,
            rules: {
                nickName: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    {
                        pattern: /^\S+$/,
                        message: '账号不能含有空格',
                        trigger: 'blur',
                    },
                    {
                        min: 6,
                        message: '账号不能少于 6 个字符',
                        trigger: 'blur',
                    },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^[1][345678][0-9]{9}/,
                        message: '手机号格式不正确',
                        trigger: 'change',
                    },
                ],
            },
            productData: [
                {
                    id: '1222',
                    src: require('../../assets/imgs/product_nav/scrolling-ticker1.png'),
                    name: '滚屏播报',
                    detail: '是一项强调信息展示的服务',
                },
                {
                    id: '1223',
                    src: require('../../assets/imgs/product_nav/wx-sign.png'),
                    name: '微信签到',
                    detail: '是一项观众使用微信扫码功能进行会议活动签到的服务',
                },
                {
                    id: '1224',
                    src: require('../../assets/imgs/product_nav/wx-bullet.png'),
                    name: '微信弹幕',
                    detail: '是一项提供观众和主办方互动的服务。',
                },
                {
                    id: '1225',
                    src: require('../../assets/imgs/product_nav/screen-lucky.png'),
                    name: '大屏抽奖',
                    detail: '是一项提把线下抽奖活动搬上大屏幕的服务',
                },

                {
                    id: '1226',
                    src: require('../../assets/imgs/product_nav/carsousel-show.png'),
                    name: '轮播展示',
                    detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                },
                {
                    id: '1227',
                    src: require('../../assets/imgs/product_nav/cus-scene.png'),
                    name: '自定义场景',
                    detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                },
                {
                    id: '1228',
                    src: require('../../assets/imgs/product_nav/interactive-mini.png'),
                    name: '互动小程序',
                    detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                },
                // {
                //     id: '1228',
                //     src: require('../../assets/imgs/product_nav/互动小程序.png'),
                //     name: '评分&投票',
                //     detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                // },
                // {
                //     id: '1229',
                //     src: bg_5,
                //     name: '音轨特效',
                //     detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                // },
                // {
                //     id: '1231',
                //     src: bg_5,
                //     name: '媒体直播',
                //     detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                // },
                // {
                //     id: '1232',
                //     src: bg_5,
                //     name: '抢红包',
                //     detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                // },
                // {
                //     id: '1233',
                //     src: bg_5,
                //     name: '启动仪式',
                //     detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                // },
                // {
                //     id: '1234',
                //     src: bg_5,
                //     name: '观众抽奖',
                //     detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                // },
                // {
                //     id: '1235',
                //     src: bg_5,
                //     name: '观众打赏',
                //     detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                // },
                // {
                //     id: '1236',
                //     src: bg_5,
                //     name: '话题讨论',
                //     detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                // },
                // {
                //     id: '1237',
                //     src: bg_5,
                //     name: '大屏抽奖',
                //     detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                // },
            ],
            dongData: [
                {
                    id: '1222',
                    src: bg_2,
                    name: '答题过关',
                    detail: '是一项强调信息展示的服务',
                },
                {
                    id: '1223',
                    src: bg_3,
                    name: '微信抢答',
                    detail: '是一项观众使用微信扫码功能进行会议活动签到的服务',
                },
                {
                    id: '1224',
                    src: bg_1,
                    name: '摇一摇活动',
                    detail: '是一项提供观众和主办方互动的服务。',
                },
                {
                    id: '1225',
                    src: bg_5,
                    name: '疯狂点击',
                    detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                },
                {
                    id: '1226',
                    src: bg_5,
                    name: '疯狂加油',
                    detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                },
                {
                    id: '1227',
                    src: bg_5,
                    name: 'flappy bird',
                    detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                },
                {
                    id: '1228',
                    src: bg_4,
                    name: '切水果',
                    detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                },
                {
                    id: '1229',
                    src: bg_5,
                    name: '打飞机',
                    detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                },
                {
                    id: '1231',
                    src: bg_5,
                    name: '跑酷',
                    detail: '是一项把线下抽奖活动搬上大屏幕的服务',
                },
            ],
        };
    },
    beforeMount() {},
    created() {},
    mounted() {
        // sessionStorage.clear();
        // let cookieStr = this.getCookie('account');
        // if (cookieStr) {
        //     let account = JSON.parse(cookieStr);
        //     this.account.username = account.username;
        //     this.account.password = account.password;
        // } else {
        //     this.isRemember = false;
        // }
        var me = this;
        this.loadImg = loadImg;
        this.loadImg('pc-product-img', 1366, 344);
        window.addEventListener(
            'resize',
            () => {
                this.loadImg('pc-product-img', 1366, 344);
            },
            false
        );
        var box = document.getElementsByClassName('pc-product-content-wrap');
        for (var j = 0; j < box.length; j++) {
            if (box[j].children.length % 4 != 0) {
                var len = 4 - (box[j].children.length % 4);
                for (var i = 0; i < len; i++) {
                    var node = document.createElement('div');
                    node.className = 'container';
                    node.style.visibility = 'hidden';
                    box[j].appendChild(node);
                }
            }
        }
    },
    methods: {
        loadImg() {},
        goLogin(a) {
            this.dialogVisible = !0;
            this.$emit('showLogin', true);
            this.isSignIn = a === 'signIn';
            this.showmask = true;
        },
        closeDialog(a) {
            this.dialogVisible = !1;
            this.showmask = false;
            this.$emit('showLogin', false);
        },
        close() {
            this.showmask = false;
        },
        productDataItemCLick(e) {
            let nodeList = e.currentTarget.parentNode.children;
            nodeList = Array.from(nodeList);
            for (let ii in nodeList) {
                nodeList[ii].classList.remove('selected');
            }
            e.currentTarget.classList.add('selected');
        },
        handleLogin() {
            if (this.signUp) {
                this.$refs.ruleForm.validate(res => {
                    if (res) {
                        this.$message.success(JSON.stringify(res));
                        let param = {
                            uname: this.account.nickName,
                            emailVarchar: this.account.username,
                            passwordVarchar: this.account.password,
                            tel: this.account.mobile,
                        };
                        this.$api.post(
                            '/cj_user/register',
                            param,
                            success => {
                                this.$message.success('注册成功');
                                // console.log(success);
                            },
                            fal => {
                                this.$message.error(fal);
                            }
                        );
                    } else {
                        return false;
                    }
                });
            } else {
                if (!this.account.username || !this.account.password) {
                    return this.$message.warning('用户名和密码不能为空');
                }
                this.isLoging = true;
                let params =
                    'username=' +
                    encodeURIComponent(this.account.username) +
                    '&password=' +
                    encodeURIComponent(this.account.password) +
                    '&rememberMe=' +
                    this.isRemember;
                // this.$router.push({ path: '/index' });
                this.$api.post(
                    '/security/login',
                    params,
                    success => {
                        if (this.isRemember) {
                            let account = JSON.stringify(this.account);
                            this.setCookie('account', account, 3);
                        } else {
                            this.setCookie('account', '');
                        }
                        let name = {
                            username: this.account.username,
                            nickName: success,
                        };
                        sessionStorage.setItem('account', JSON.stringify(name));
                        this.isLoging = false;
                        // this.$message.success('登录成功');
                        let q = this.getQuery();
                        if (q && q.formId) {
                            this.$router.push({
                                path: '/qrCodeTypeIn',
                                query: { formId: q.formId },
                            });
                        } else {
                            this.$router.push({ path: '/index' });
                        }
                    },
                    fal => {
                        this.isLoging = false;
                        this.$message.error(fal);
                    }
                );
            }
        },
        getCookie(cname) {
            var name = cname + '=';
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) === 0) {
                    return this.strUncode(c.substring(name.length, c.length));
                }
            }
            return '';
        },
        setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
            var expires = 'expires=' + d.toGMTString();
            document.cookie =
                cname + '=' + this.strEncode(cvalue) + '; ' + expires;
        },
        getQuery() {
            let param = {};
            let str = window.location.href.split('?');
            if (str.length === 2) {
                let strArr = window.location.href.split('?')[1].split('&');
                strArr.forEach(item => {
                    let s = item.split('=');
                    s.length === 2 ? (param[s[0]] = s[1]) : null;
                });
            }
            // console.log(param);
            return param;
        },
        strEncode(code) {
            var c = String.fromCharCode(code.charCodeAt(0) + code.length);
            for (let i = 1; i < code.length; i++) {
                c += String.fromCharCode(
                    code.charCodeAt(i) + code.charCodeAt(i - 1)
                );
            }
            return encodeURIComponent(c);
        },
        strUncode(code) {
            code = decodeURIComponent(code);
            var c = String.fromCharCode(code.charCodeAt(0) - code.length);
            for (var i = 1; i < code.length; i++) {
                c += String.fromCharCode(
                    code.charCodeAt(i) - c.charCodeAt(i - 1)
                );
            }
            return c;
        },
        gotoDetail() {
            this.$router.push({
                path: '/productDetail',
                query: { name: '1111' },
            });
        },
    },
};
</script>

<style lang="scss">
.pc-product {
    .pc-product-title {
        text-align: center;
        font-size: 30px;
        color: #252525;
        padding: 30px 0;
        &:nth-child(2) {
            padding: 37px 0 21px;
        }
    }
    .pc-product-content {
        width: 1200px;
        margin: 0 auto;
        padding-bottom: 24px;
        .pc-product-content-wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .container-out {
                width: 25%;
                padding: 0 10px;
                box-sizing: border-box;
            }
            .container {
                border: 2px solid transparent;
                margin-bottom: 6px;
            }
            .container:hover {
                border: 2px solid #1994fa;
            }
            .container > div {
                border: 1px solid #d9d9d9;
                &:hover {
                    border: 1px solid #1994fa;
                    .pc-product-content-down button {
                        color: #ffffff;
                        background-color: #3a8ee6;
                    }
                }
                .pc-product-content-up {
                    display: flex;
                    justify-content: space-around;
                    height: 127px;
                    border-bottom: 1px solid #d9d9d9;
                    .svg {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .content-up-name {
                        margin: auto 0;
                        font-size: 18px;
                        color: #252525;
                    }
                }
                .pc-product-content-down {
                    padding: 20px 28px;
                    height: 127px;
                    font-size: 14px;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    & > div:nth-child(1) {
                        color: #666666;
                    }
                    button {
                        color: #3a8ee6;
                        border: 1px solid #3a8ee6;
                        border-radius: 14px;
                        position: absolute;
                        background-color: #fff;
                        bottom: 20px;
                    }
                }
            }
        }
    }

    & > div:nth-child(2) {
        background-color: #fbfbfb;
    }
}
@media screen and (max-width: 1200px) {
    .pc-product {
        .pc-product-content {
            width: 100%;
        }
    }
}
@media screen and (max-width: 768px) {
    .pc-product {
        .pc-product-title {
            font-size: 20px;
            padding: 20px 0;
        }
        .pc-product-content {
            .pc-product-content-wrap {
                .container-out {
                    width: 50%;
                }
                .container > div {
                    .pc-product-content-up {
                        height: 100px;
                        .content-up-name {
                            font-size: 14px;
                        }
                    }
                    .pc-product-content-down {
                        height: 127px;
                        font-size: 12px;
                        button {
                            border: 1px solid #3a8ee6;
                            border-radius: 14px;
                            position: absolute;
                            background-color: #fff;
                            bottom: 20px;
                            padding: 6px 12px;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 320px) {
    .pc-product {
        .pc-product-content {
            .pc-product-content-wrap {
                .container-out {
                    width: 80%;
                    margin: 0 auto;
                }
                .container > div {
                    .pc-product-content-up {
                        height: 100px;
                    }
                    .pc-product-content-down {
                        height: 100px;
                        button {
                            bottom: 10px;
                        }
                    }
                }
            }
        }
    }
}
</style>